<template>
  <div class="help">
    <x-header>帮助</x-header>
    <search
      @on-change="getResult"
      v-model="searchValue"
      position="absolute"
      auto-scroll-to-top
      top="46px">
      <group>
        <cell v-for="(item, index) in results" :key="index" :title="item.title">
          <a v-for="(phone, phoneIndex) in item.phones" :key="phoneIndex" :href="`tel: ${phone}`">
            {{ phone }}
            <span v-if="phoneIndex!==item.phones.length-1">,</span>
          </a>
        </cell>
      </group>
    </search>
    <!-- 堆场电话 -->
    <group label-width="5.5em" title="堆场电话查询">
      <cell v-for="(item, index) in yardPhoneList" :key="index" :title="item.title">
        <a v-for="(phone, phoneIndex) in item.phones" :key="phoneIndex" :href="`tel: ${phone}`">
          {{ phone }}
          <span v-if="phoneIndex!==item.phones.length-1">,</span>
        </a>
      </cell>
    </group>
  </div>
</template>

<script>
import {
  XHeader,
  Tab,
  TabItem,
  Group,
  XInput,
  XButton,
  Search,
  Cell
} from 'vux'
export default {
  name: 'help',
  components: {
    XHeader,
    Tab,
    TabItem,
    Group,
    XInput,
    XButton,
    Search,
    Cell
  },
  data () {
    return {
      // 堆场电话
      yardPhoneList: [
        {title: '金东暂落箱', phones: ['15601795978', '13122862828', '021-50122916']},
        {title: '上海众人货物运输', phones: ['13331929690']},
        {title: '创元六', phones: ['50490190', '50490193']},
        {title: '浦东立昌', phones: ['58487981', '33925719', '50675073']},
        {title: '创元二堆场', phones: ['68483085', '68483095']},
        {title: '浦东创元', phones: ['68483706', '68483570', '68483587']},
        {title: '立昌三堆场', phones: ['33929783', '50675075', '50675093']},
        {title: '创元五', phones: ['58487922', '58487955', '68483602']},
        {title: '东宝落箱', phones: ['68729388', '13661667870']},
        {title: '浦西立昌', phones: ['33792169', '33791194', '33791566']},
        {title: '珉钧五', phones: ['58670379']},
        {title: '创元一堆场', phones: ['68483570', '68483571', '68485870']},
        {title: '德威五', phones: ['68280390']},
        {title: '振标落箱外五', phones: ['13817740528']},
        {title: '德威六', phones: ['33841593', '61820130', '61820134']},
        {title: '毅发一', phones: ['38751828', '38751705', '38750043']},
        {title: '德威一', phones: ['61820131', '61820106', '61820134']},
        {title: '珉钧三', phones: ['38579189', '58648650', '13764725526']},
        {title: '浦东珉钧', phones: ['68489980', '68488819', '68483369']},
        {title: '优田二', phones: ['18616265212']},
        {title: '创元四堆场', phones: ['50429203']},
        {title: '德威二', phones: ['58677536', '61820132', '61820131']},
        {title: '珉钧六', phones: ['58649155']},
        {title: '新霸达二', phones: ['50406476', '50403342']},
        {title: '德威四', phones: ['68280390']},
        {title: '东华四', phones: ['68660858', '58617166']},
        {title: '东华弘信堆场', phones: ['66876671']},
        {title: '东华十堆场', phones: ['66876671']},
        {title: '德威八堆场', phones: ['50396178', '50396618', '61820132']},
        {title: '东华五', phones: ['33790277', '33790278', '56127277']},
        {title: '长荣箱管', phones: ['38501247', '38501080']},
        {title: '东华三', phones: ['58645424', '58647426', '66151717']},
        {title: '浦东东亚', phones: ['58486599', '58486782']},
        {title: '毅发五', phones: ['58584644', '58584811']},
        {title: '东华洋山', phones: ['58282503', '58281723', '58283399']},
        {title: '浦东集发二', phones: ['50400177', '13816364272']},
        {title: '德威七', phones: ['18221085487']},
        {title: '安信荣城', phones: ['58648421', '58648412', '15721346630']},
        {title: '珉钧一分堆场', phones: ['58551018', '13818209534', '50717021']},
        {title: '中海创元', phones: ['68483085']},
        {title: '东华6 阿联酋箱管', phones: ['58692079']},
        {title: '东森', phones: ['58643000', '86173500']},
        {title: '新霸达一', phones: ['50404849', '50406590', '50406227']},
        {title: '中远集发临港', phones: ['20938720']},
        {title: '上港外运凌海', phones: ['50191288', '50673378', '50671172']},
        {title: '东华六', phones: ['58692079']},
        {title: '中海外贸仓储', phones: ['38600497', '38600427']}
      ],
      searchValue: '',
      results: []
    }
  },
  methods: {
    getResult () {
      this.results = []
      this.yardPhoneList.forEach((item) => {
        if (item.title.indexOf(this.searchValue) > -1) {
          this.results.push(item)
        }
      })
    }
  }
}
</script>

<style lang="less">
</style>
